Day25 Event Capture, Propagation, Bubbling and Once

第25天的主要講解元素事件觸發時的觸發順序。

這次的實作是由三個div相互包裹著。

在每一個div中建立click事件，在事件都是對應同樣的函示。

  divs.forEach(div => div.addEventListener('click', logText, {
    capture:false,
  }))

當按下three的div元素時，會發現console.log()的結果為three、two、one，當按two的div元素時，其結果為two、one，以此類推，若是在body中加入同樣的函示，當點下three的div元素，其結果為three、two、one。

這時就會發現若是觸發three的div元素，其顯示結果為three、two、one、body。

document.body.addEventListener('click', logText)

這時發現event的傳遞結果為向上傳遞的，此事件傳遞的方式叫冒泡bubbling。

而另外一種事件傳遞的方式為capturing，而capturing的傳遞方式是從根節點傳遞至目標節點。

因此事件的傳遞設定如下，當click事件觸發時，結果為one、two、three。

divs.forEach(div => div.addEventListener('click', logText, {
    capture: false,
  }));

如果為避免bubbling、capturing的事情發生，可以事件中加入e.stopPropagation()，來避免事件的傳遞。若使用e.stopPropagation()時，要知道事件傳遞的方式為bubbling還是capturing，這樣才可避免事件觸發到錯的目標節點。

接下來在事件中加入once，當事件被觸發時，該事件就只能觸發一次。

  button.addEventListener('click', () => {
    console.log('Click!!!');
  }, {
    once: true
  });

Html

<div class="one">
  one
  <div class="two">
    two
    <div class="three">
      three
    </div>
  </div>
</div>

Javascript

1. EventTarget.addEventListener()
   EventTarget.addEventListener() 方法能將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件，或是其它支援事件的物件（如：XMLHttpRequest）。

   1. bubbling 冒泡:是指事件傳遞的順序是由目標節點向上傳遞，傳遞至根節點。
   2. capturing 捕獲: 是指事件傳遞的順序是由根節點向下傳遞，傳遞至目標節點。[1]

[2]

語法

target.addEventListener(type, listener[, options]);

options

1. capture:當capture為true時，事件順序為capture。

2. once:當once為true時，代表事件只觸發一下，之會在無法觸發該元素。

3. passive:當passive為ture時，省略preventDefault()的方法。
   passive:A Boolean indicating that the listener will never call preventDefault(). If it does, the user agent should ignore it and generate a console warning.

4. Event.eventPhase
   表示事件物件目前於事件流（Event Flow）中傳遞的進度為哪一個階段。

5. Event.preventDefault()
   如果事件可以被取消，就取消事件（即取消事件的預設行為）。但不會影響事件的傳遞，事件仍會繼續傳遞。

6. EventTarget.removeEventListener()
   EventTarget.removeEventListener() 方法可以移除先前由 addEventListener() 所註冊的事件監聽器。

tags: bubbling, capturing